<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-weight: bolder;">菜品管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px ;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 60%; margin-left: 15%;">
        <el-form-item label="菜品" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="ruleForm.price" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="菜品状态" prop="state">
          <el-radio-group v-model="ruleForm.state">
            <el-radio label="上架"></el-radio>
            <el-radio label="下架"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜品类目" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择菜品类目">
            <el-option :label="item.leimu" :value="item.leimu" v-for="item in allType" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 是否为商家推荐菜品 -->
        <el-form-item label="推荐菜品" prop="recommend">
          <el-radio-group v-model="ruleForm.recommend">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 推荐菜品的三个标签 -->
        <el-form-item label="菜品标签一" prop="tag_1">
          <el-input v-model="ruleForm.tag_1"></el-input>
        </el-form-item>
        <el-form-item label="菜品标签二" prop="tag_2">
          <el-input v-model="ruleForm.tag_2"></el-input>
        </el-form-item>
        <el-form-item label="菜品标签三" prop="tag_3">
          <el-input v-model="ruleForm.tag_3"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="图片">
          <el-upload action="/ordering/food/upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove" :on-success="afterSuccessUpload" limit="1" ref="upload">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm()">Add Food</el-button>
          <el-button @click="resetForm('ruleForm')">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      // 自定义函数，每个if、else都要添加callback()
      var recommend = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('是否为商家推荐菜品'));
        } else {
          callback();
        }
      }
      // 检验是否为推荐菜品，如果是推荐菜品，则一定要填写标签
      var isRecommend = (rule, value, callback) => {
        if (this.ruleForm.recommend === '是') {
          if (value === '') {
            callback(new Error('请填写3个推荐菜品标签！'));
          } else if (value.length > 4) {
            callback(new Error('推荐菜品标签字数限定为1-4！'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }
      return {
        // 这个数组主要用来存储菜品的所有类目
        allType: [],
        // 表单数据
        ruleForm: {
          name: '',
          price: '',
          desc: '',
          type: '',
          state: '',
          imageUrl: '',
          recommend: '',
          tag_1: '',
          tag_2: '',
          tag_3: ''
        },
        // 表单字段的验证规则
        rules: {
          name: [{
              required: true,
              message: '请输入菜品名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '菜品名字数在 1 到 10 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '单价不能为空',
            trigger: 'blur'
          }],
          desc: [{
            required: true,
            message: '简介不能为空',
            trigger: 'blur'
          }, {
            min: 5,
            max: 30,
            message: '菜品简介字数在 5 到 30 个字符',
            trigger: 'blur'
          }],
          state: [{
            required: true,
            message: '请选择菜品状态',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请选择菜品类目',
            trigger: 'change'
          }],
          recommend: [{
            validator: recommend,
            trigger: 'change'
          }],
          tag_1: [{
            validator: isRecommend,
            trigger: 'blur'
          }],
          tag_2: [{
            validator: isRecommend,
            trigger: 'blur'
          }],
          tag_3: [{
            validator: isRecommend,
            trigger: 'blur'
          }]
        },
        // 上传图片
        dialogImageUrl: '',
        // 控制图片展示框
        dialogVisible: false
      };
    },
    created() {
      this.getType()
    },
    methods: {
      // 获取菜品类目
      async getType() {
        const allType = await this.$http.get('/ordering/getType')
        // console.log(allType.data.allType)
        // console.log(allType.status)
        if (allType.status !== 200) {
          return this.$message.error('获取菜品类目失败')
        }
        this.allType = allType.data.allType
      },
      // 提交表单
      submitForm() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            const foodResult = await this.$http.post('/ordering/food', this.ruleForm)
            if (foodResult.status !== 200) {
              this.$message.error('添加菜品失败')
            }
            this.$message.success('添加菜品成功')
            // 重置表单
            this.resetForm()
          } else {
            return false;
          }
        });
      },
      // 重置表单
      resetForm() {
        this.$refs.ruleForm.resetFields();
        // 清空上传图片列表
        this.$refs.upload.clearFiles()
      },
      // 移除图片
      handleRemove(file, fileList) {},
      // 上传图片前预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 上传图片成功后
      afterSuccessUpload(file) {
        this.ruleForm.imageUrl = file.filename
      }
    }
  }
</script>

<style>
</style>
